<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="js/extjs/ext-all.js">
        </script>
    </head>
    <body>
        <input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
        <div id='hello'>
        </div>
    </body>
    <script>
    </script>
    <script>
        
        
        
        Ext.onReady(function(){
        
		var treeNodeClick = function(node, e){
		
         if(node.isLeaf()){
           e && e.stopEvent();
            var tid = 'tab-'+node.id;
            var B=Ext.getCmp(tid);
            var centerTabPanel = Ext.getCmp('center-panel'); //Ext.getCmp('centerTabPanel');
						if(!B){ //tab 不存在情况
							var C="";
							var html = null;
							var autoLoad = null;
							/*
							//加载外部链接
							if (/^http/i.test(node.attributes.href)){
								html="<iframe src='"+node.attributes.href+"' width='100%' id='frm-"+tid+"' autoScroll=true  height='100%' frameborder=0/>";
							}else{
								autoLoad = {url:node.attributes.href ,scripts:true};
							}
							*/
							// 所有链接全改为在iframe中打开
							html="<iframe src='"+node.attributes.href+"' width='100%' id='frm-"+tid+"' autoScroll=true  height='100%' frameborder=0/>";
							
							//Ext.getCmp('center-panel').getActiveTab().id
							var xtab = new Ext.Panel({
								closable: true,
								autoLoad:autoLoad,
								treeNodeID:node.id,
								channel:node.attributes.channel,
								link : encodeURIComponent(node.attributes.href),
								id:tid,
								title:node.text,
								autoScroll:false,
								sessionID:Ext.state.Manager.get("SessionID"),
								html:html
							});
							xtab.on('click',function(){
								alert(this.id);
							},xtab);
							
							B=centerTabPanel.add(xtab);
							
							centerTabPanel.setActiveTab(B);
							centerTabPanel.body.mask('Loading', 'x-mask-loading');
							setTimeout(function(){centerTabPanel.body.unmask();},1000);
							
							if(centerTabPanel.hidden){
								centerTabPanel.show();
								centerTabPanel.doLayout();
								centerPanel.getLayout().setActiveItem(0);
								centerPanel.doLayout()
							}
						} //end if (!B)
						else{
								centerTabPanel.setActiveTab(B);
								var tHref=node.attributes.href;
								Ext.getDom("frm-"+tid).src = tHref;
						}
         }
    }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
            var menuTree = new Ext.tree.TreePanel({
                id: 'menu-tree',
                nocache: false,
                loader: new Ext.tree.TreeLoader({
                    nocache: false,
                    id: 'tree-loader',
                    dataUrl: '/api/GetMenu?s=' + Math.random()
                }),
                rootVisible: false,
                lines: false,
                autoScroll: true,
				  root: new Ext.tree.AsyncTreeNode({id:'root',text:'选择模块',expanded:true})
            
            });
         

            menuTree.on('click',treeNodeClick);
            
            
            new Ext.Viewport({
                enableTabScroll: true,
                layout: "border",
                items: [{
                
                    region: "north",
                    height: 100,
                    html: "<h1>网站后台管理系统!</h1>"
                }, {
                    title: "菜单栏",
                    region: "west",
                    width: 200,
                    collapsible: true,
                    layout: 'accordion',
                    layoutConfig: {
                    
                        animate: true
                    
                    },
                    items: [{
                    
                        title: '树状菜单',
                      
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav',
                        tools: [{
                            id: 'refresh',
                            on: {
                                click: function(){
                                   var tree = Ext.getCmp('menu-tree');
                                     tree.body.mask('Loading', 'x-mask-loading');
                                     tree.root.reload();
                                     tree.root.collapse(true, false);
                                     setTimeout(function(){ // mimic a server call
                                     tree.body.unmask();
                                     tree.root.expand(true, true);
                                     }, 1000);
                                    
                                }
                            }
                        }],
						items:[menuTree]
                    
                    }]
                
                
                
                
                }, {
                    xtype: "tabpanel",
                    region: "center",
					id:'center-panel',
                    items: [{
                        title: "面板1",
                        html: "<h1>面板1!</h1>"
                    }, {
                        title: "面板2",
                        html: "<h5>这是面板!</h5>"
                    }]
                }]
            });
        });
    </script>
</html>
